<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.left,.right{
    float:left;
    margin-right:30px;
}
.left{
    width: 400px;
}
.small ul li{
    float:left;
    width:50px;
    height:50px;
    border:1px solid #000;
    margin:10px;
}
.color span{
    margin-right:10px;
}
</style>
</head>
<body>
<div class="page-header">
    <h1>详情页面 <small>旅游景点</small></h1>
</div>
<div class="header">
    <div class="left">
        <div class="middle">
            <img width="400" height="400" src="" id="middleImg">
            <div class="shade"></div>
            <div class="big"></div>
        </div>
        <div class="small">
            <ul>
                <!-- <li>图1</li>
                <li>图2</li>
                <li>图3</li>
                <li>图4</li> -->
            </ul>
        </div>
    </div>
    <div class="right">
        <p><b>商品名称：</b><span id="goodsname"></span></p>
        <p><b>商品价格：</b>￥<span id="price">00</span>元</p>
        <p class="color"><b>颜色：</b>
        <!-- <span class="btn btn-warning">红色</span>
        <span class="btn btn-warning">蓝色</span>
        <span class="btn btn-warning">绿色</span> -->
        </p>
        <p>
            <a href="javascript:;" class="btn btn-primary addCart">加入购物车</a>
            <a href="" class="btn btn-primary">立即购买</a>
        </p>
    </div>
</div>
<div style="clear:both;"></div>
<div>
    <h1>商品描述：</h1>
    <div class="introduce">
    
    </div>
</div>

</body>
<script src="./js/promiseAjax.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<script src="./js/cookie.js"></script>
<script type="text/javascript">
// 在详情页要展示商品的图片和商品名称....商品信息
// 这个商品信息应该是点击列表页的时候，所点击的这个商品的信息
// 在详情页怎么才能知道点击的是哪一个商品呢？
// 从列表页传了一个id过来，这个id就是当前这个商品的id
// 如何获取这个id
// 在地址栏 - 获取到地址栏的url
// var url = window.location.href;
// console.log(url);
// location对象中有一个属性可以直接获取到所有的参数
var params = window.location.search;
// console.log(params);
// 将url中的id的值拿出来
// 使用正则将这个数字提取出来
var reg = /id=(\d+)/;
var p = params.match(reg);
// console.log(p);
if(!p){
    alert("非法访问");
    location.href = "home.html";
}
var id = p[1];
// 需要使用id发送ajax，从数据库中将当前这个商品的信息请求回来
sendAjax({
    url:"./server/detail.php",
    data:{
        id:id
    },
    type:"post",
    success:function(res){
        // console.log(res);
        if(res.status==200){
            // 成功之后加载数据
            // var data = JSON.parse(res.data);
            var data = res.data;
            // console.log(data);
            $("#middleImg").attr("src",data.imgpath);
            $("#goodsname").text(data.name);
            $("#price").text(data.price);
            $(".introduce").html(data.introduce);
            // 很多小图使用 ==== 分割
            var  arr = data.smallimgs.split("====");
            // console.log(arr);
            for(var i=0;i<arr.length;i++){
                var li = $("<li><img src='"+arr[i]+"' width='50' height='50'></li>");
                $(".small ul").append(li);
            }
            // 颜色
            // console.log(data.colors);
            var colors = data.colors.split("====");
            // console.log(colors);
            for(var i=0;i<colors.length;i++){
                var span = $("<span class='btn btn-warning'>"+colors[i]+"</span>");
                // console.log(span);
                $(".color").append(span);
            }
        }
    }
});

// 点击加入购物车的逻辑
/*
1.判断是否登陆，没有登陆就应该让用户去登陆，再来加入购物车
2.将当前这个商品数据存起来
    正常的项目，购物车数据存在了数据库 - 数据库比较复杂
    使用本地存储来存储购物车的数据
3.存储数据的时候
    本地存储要存入字符串
        商品id、用户、数量 == 组合成一个对象
        将对象转成json字符串

*/

$(".addCart").click(function(){
    // console.log(123);
    // 判断用户是否登录
    // 从cookie中获取用户名
    var username = getCookie("username");
    // console.log(username);
    if(!username){ // 没有登陆
        alert("请先登陆");
        location.href = 'login.html'; 
        return false;
    }
    // 获取商品信息组成一个对象
    // var obj = {
    //     id:id,
    //     username:username,
    //     number:1 
    // }
    // 将对象转成json字符串，存入本地存储
    // var str = JSON.stringify(obj);
    // localStorage.setItem("data",str);
    // 现在好像本地存储只能存储一条数据
    // var arr = [];
    // // 先将对象放到数组中
    // arr.push(obj);
    // // 将数组转成json字符串放入本地存储
    // var str = JSON.stringify(arr);
    // localStorage.setItem("data",str);
    // 此时，数组中永远都是一个值，因为每次都是arr为空，放入一条数据，然后就存到本地存储了
    // 关键点就在这个数组，第一次存，arr就应该是空的，但是第二次存的时候，数组不应该为空 - 应该是上次在本地存储过的数据
    // 数组不能直接定义成空，应该判断本地存储中有没有数据，有的话就使用这个数据作为数组，没有的话才是空的
    // var data = localStorage.getItem("data");
    // // console.log(data); // 这是个字符串 - 应该转成数组再使用 - 如果没有本地存储，值是null 可以进行判断
    // if(data){
    //     var arr = JSON.parse(data); // 本地存储有值，就使用其中的值作为数组arr
    // }else{
    //     var arr = []; // 本地存储中没有值，就使用空数组arr
    // }
    // // console.log(arr);
    // arr.push(obj);
    // var str = JSON.stringify(arr);
    // localStorage.setItem("data",str);
    // 加入购物车第一次第二次没有问题了，但是同一个商品加入多次的话，会生成新数据，但是应该是数量+1就好了
    // 关键点在obj对象的数量
    // 先判断是否当前用户已经加入过这个商品了，加入过的话，获取到数量+1，，没有加入过，数量才是1
    // 先获取本地存储中的数据，然后判断里面是否有这个id
    /* var data = localStorage.getItem("data");
    // 再判断本地存储中是否有数据
    if(data){
        data = JSON.parse(data); // 有值就将他转成数组
        // 数组方法：filter every some
        var res = data.some(function(v){
            // console.log(v);
            return v.id==id
        })
        // console.log(res);
        if(res){ // 表示购物车中就有这个商品
            // 有这个商品应该做
            // 应该先找到小数组，然后给小数组 中的number进行++
            // 重新组成一个大数组放到本地存储中
            // find findIndex
            var index = data.findIndex(function(v){
                return v.id==id;
            });
            // console.log(index);
            data[index].number++;
            // console.log(data);
            // 直接将data这个大数组转成json字符串放大本地存储就ok
            // localStorage.setItem("data",JSON.stringify(data));
        }else{
            var obj = {
                usename:username,
                id:id,
                number:1
            }
            data.push(obj);
            // localStorage.setItem("data",JSON.stringify(data));
        }
        localStorage.setItem("data",JSON.stringify(data));
    }else{ // 如果在本地存储中没有数据
        var data = [];
        var obj = {
            usename:username,
            id:id,
            number:1
        }
        data.push(obj);
        localStorage.setItem("data",JSON.stringify(data));
    }
    // 购物车添加成功后，应该跳转到购物车页面了
    alert("添加购物车成功");
    location.href = "cart.html"; */
    
    
    // 同一个商品添加多次，应该让数量++，而不应该重新创建数据

    // 多个商品应该放到一个数组中，不应该每次都只有一条数据

    /*
    1.首先从本地存储中获取数据
    2.判断本地存储中是否有数据
        1.有数据
            是否有当前这个商品的数据
                有
                    将其中的数量++
                没有
                    重新放一个当前商品的数据进去
        2.没有数据
            做一个空数组，放进当前商品的数据，放到本地存储中

    */
    var data = localStorage.getItem("data");

    // console.log(data);
    // return false;
    if(data){ // 有数据
    console.log(data);
        data = JSON.parse(data);
        // 是否有当前这个商品的数据
        // 判断data数组中每一个元素(对象)中的id和当前商品的id是否相等
        var index = data.findIndex(function(v){
            return v.id == id;
        }); 
        if(index>=0){
            data[index].number++;
        }else{
            var obj = {
                username:username,
                id:id,
                number:1
            };
            data.push(obj);
        }
        localStorage.setItem("data",JSON.stringify(data));
        
        
        
        // var res = data.some(function(v){
        //     return v.id == id;
        // });
        // // 如果res是true，表示有这个商品
        // if(res){
        //     // 得到这个对象，将其中的数量++
        //     // 从数组中得到这个对象的下标
        //     var index = data.findIndex(function(v){
        //         return v.id == id;
        //     }); 
        //     data[index].number++;
        //     // console.log(data);
        //     // 将data转成字符串，存入本地存储
        //     localStorage.setItem("data",JSON.stringify(data));
        // }else{ // 在数据找不到当前商品
        //     var obj = {
        //         username:username,
        //         id:id,
        //         number:1
        //     };
        //     data.push(obj);
        //     localStorage.setItem("data",JSON.stringify(data));
        // }
    }else{   // 没有本地存储
        var data = []; // 空数组
        var obj = { // 放入当前商品的数据
            username:username,
            id:id,
            number:1
        };
        data.push(obj);
        // console.log(data);
        localStorage.setItem("data",JSON.stringify(data));
    }
    alert("添加购物车成功");
    location.href = "cart.html"
    // 在jquery中阻止默认行为使用 return false
    // jquery中的return false 号称阻止一切，除了默认行为，还能阻止冒泡
    return false;
});
</script>
</html>